import React, { useEffect, useState } from 'react'
import './Info.scss'
import { NavBar, Cell, Popup, Tag, Image, Rate, Button } from 'react-vant';
import { ArrowLeft, Arrow,AfterSale } from '@react-vant/icons';
import sendHttp from '../../http/sendHttp';
import { useSearchParams, useNavigate } from 'react-router-dom';

export default function Info() {

    const [search] = useSearchParams()
    const latitude = search.get('latitude')
    const longitude = search.get('longitude')
    const cate_id = search.get('cate_id')
    const title = search.get('title')
    const [nav, setNav] = useState(title)
    const navigate = useNavigate()
    const [shopList, setShopList] = useState([])
    const [category, setCategory] = useState([])
    const [idx, setIdx] = useState(0)
    const [idx2, setIdx2] = useState(0)
    const [categoryItem, setCategoryItem] = useState([])
    const [mode, setMode] = useState([])
    const [attribute, setAttribute] = useState([])


    useEffect(() => {
        sendHttp('get', `/shopping/v2/restaurant/category?latitude=${latitude}&longitude=${longitude}`)
            .then((res) => {
                setCategory(res.data)
                setCategoryItem([...res.data[0].sub_categories])
                console.log(res.data);
            })
        sendHttp('get', `/shopping/restaurants?latitude=${latitude}&longitude=${longitude}&restaurant_category_id=10&order_by=`)
            .then((res) => {
                setShopList(res.data)
            })
        sendHttp('get', `/shopping/restaurants?latitude=${latitude}&longitude=${longitude}&restaurant_category_id=10&order_by=3`)
            .then((res) => {
                console.log(res);
            })
        sendHttp('get', `/shopping/v1/restaurants/delivery_modes?latitude=${latitude}&longitude=${longitude}`)
            .then((res) => {
                setMode(res.data)
            })
        sendHttp('get', `/shopping/v1/restaurants/activity_attributes?latitude=${latitude}&longitude=${longitude}`)
            .then((res) => {
                setAttribute(res.data)
            })
    }, [])

    const [showCloseIcon1, setShowCloseIcon1] = useState(false)
    const [showCloseIcon2, setShowCloseIcon2] = useState(false)
    const [showCloseIcon3, setShowCloseIcon3] = useState(false)


    return (
        <div className='info'>
            <div className="navbar">
                <NavBar
                    title={title}
                    leftText={<ArrowLeft color='#fff' onClick={() => navigate(-1)} />}
                />
            </div>
            <div className='info-top'>
                <Cell title={nav} isLink arrowDirection='down' onClick={() => setShowCloseIcon1(true)} />
                <Cell title='排序' isLink arrowDirection='down' onClick={() => setShowCloseIcon2(true)} />
                <Cell title='筛选' isLink arrowDirection='down' onClick={() => setShowCloseIcon3(true)} />
            </div>
            <Popup
                visible={showCloseIcon1}
                style={{ height: '56%' }}
                position='top'
                onClose={() => setShowCloseIcon1(false)}
                className='popup'
            >
                <div className='category'>
                    <div className='category-left'>
                        <ul>
                            {category.map((item, index) => {
                                return (
                                    <li key={item.id} onClick={() => { setCategoryItem([...category[index].sub_categories]); setIdx(index) }}
                                        className={index === idx && 'info-active'}
                                    >
                                        <div className='one'>
                                            <Image src={`https://fuss10.elemecdn.com/1/ba/${item.image_url}.jpeg`}></Image>
                                            <div className='name'>{item.name}</div>
                                        </div>
                                        <div>
                                            <span className="two">
                                                {item.count}
                                            </span>
                                            <Arrow />
                                        </div>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                    <div className='category-rigth'>
                        <ul>
                            {categoryItem.map((item, index) => {
                                return (
                                    <li key={item.id}
                                        onClick={() => { setIdx2(index); setNav(item.name) }}
                                        className={index === idx2 && 'info-active2'}
                                    >
                                        <div className='one'>
                                            <div className='name'>{item.name}</div>
                                        </div>
                                        <div>
                                            <span className="two">
                                                {item.count}
                                            </span>
                                            <Arrow />
                                        </div>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                </div>
            </Popup>
            <Popup
                visible={showCloseIcon2}
                style={{ height: '45%' }}
                position='top'
                onClose={() => setShowCloseIcon2(false)}
                className='popup'
            >
                <div className='category-two'>
                    <ul>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                        <li>
                            <div className="icon"><AfterSale  /></div>
                            <span>起送价最低</span>
                        </li>
                    </ul>
                </div>
            </Popup>
            <Popup
                visible={showCloseIcon3}
                style={{ height: '42%' }}
                position='top'
                onClose={() => setShowCloseIcon3(false)}
                className='popup'
            >
                <div className='category-three'>
                    <div className='mode'>
                        <p>配送方式</p>
                        <div className='btn'>
                            {mode.map(item => {
                                return (
                                    <Button key={item.id} type='default'>{item.text}</Button>
                                )
                            })}
                        </div>
                    </div>
                    <div className='attribute'>
                        <p>商家属性（可以多选）</p>
                        <div className="btn">
                            {attribute.map(item => {
                                return (
                                    <Button key={item.id} type='default'><Tag type="primary" color={`${item.icon_color}`}>{item.icon_name}</Tag>{item.name}</Button>
                                )
                            })}
                        </div>
                    </div>
                    <div className='btns'>
                        <Button type='default'>清空</Button>
                        <Button type='info'>确定</Button>
                    </div>
                </div>
            </Popup>
            {shopList.map(item => {
                return (
                    <div className="shops-item" key={item.id}>
                        <div className='shops-img'><Image src={`https://elm.cangdu.org/img/${item.license.business_license_image}`}></Image></div>
                        <div className='shops-main'>
                            <div className='shop_title'>
                                <span className='xgys'><Tag type="primary">品牌</Tag>{item.name}</span>
                                <span className='bzp'>
                                    <ul>
                                        <li>保</li>
                                        <li>准</li>
                                        <li>票</li>
                                    </ul>
                                </span>
                            </div>
                            <div className='shop_rot'>
                                <Rate value={item.rating} size={12} gutter={1} color='#FFD21E' />
                                <span className='rate'>{item.rating}</span>
                                <span className='sale'>月销{item.recent_order_num}单</span>
                                <span className='tag'>
                                    <Tag type="primary">蜂鸟转送</Tag>
                                    <Tag plain type="primary">准时达</Tag>
                                </span>
                            </div>
                            <div className='shop_song'>
                                <span> ￥{item.float_minimum_order_amount}起送 / {item.piecewise_agent_fee.tips} </span>
                                <span className='gltime'>
                                    <div className="gl">{item.distance} /</div>
                                    <div className="time">{item.order_lead_time}</div>
                                </span>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}
